/*
 * Banner管理视图
 * @Author: zfx
 * @Date: 2018-06-19 17:52:07
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
	@deep: ~">>>";
    .v-customer-banner-views {
        padding: 20px;
	}
	@{deep} .ivu-modal-body{
		min-height: 500px;
	}
</style>

<template>

	<div class="v-customer-banner-views">
		<Tabs
			v-model="tag_name"
			type="card"
			@on-click="changeTab">

			<TabPane
				:label="$t('common.create')"
				name="新增">

				<banner-create
					ref="create"
					:jump-type="jump_type"
					:stores-data="stores"
					:device-accounts="device_accounts"
					:products="products"
					:loading="button_loading"
					@post="postData"/>

			</TabPane>

			<TabPane
				:label="$t('common.check')"
				name="查看">

				<!-- 搜索组件 -->
				<search-form
					@search="confirmSearch"
				/>

				<banner-index
					:loading="table_loading"
					:jump-type="jump_type"
					:banners="banners.data"
					@edit="bannerDetail"
					@delete="deleteBanner"
					@sort="confirmSearch"/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="banners.total"
						:current="banners.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>
		</Tabs>

		<Modal
			v-model="show_modal"
			:title="$t('banner.update_banner')"
			class-name="vertical-middle-modal"
			@on-cancel="hide_BannerModal">

			<!-- banner编辑组件 -->
			<banner-edit
				v-if="show_modal"
				ref="edit"
				:jump-type="jump_type"
				:stores-data="stores"
				:device-accounts="device_accounts"
				:products="products"
				:banner-detail="banner_detail"
				:loading="button_loading"
				@update="updateBanner"/>

			<div slot="footer"/>

		</Modal>

	</div>

</template>

<script>

import qs from 'qs';
import { mapMutations } from 'vuex';
import API_LIST from 'src/API_LIST';
import bannerCreate from './create';
import bannerIndex from './index';
import bannerEdit from './edit';
import searchForm from './search-form';

export default {

	name: 'BannerViews',

	components: {
		bannerCreate,
		bannerIndex,
		bannerEdit,
		searchForm,
	},
	data() {
		return {
			query_info: {
				page: 1,
				per_page: 20,
				name: '',
			}, // 页码

			search_info: {
				page: 1,
				per_page: 20,
			}, // 分页信息

			tag_name: '新增',

			table_loading: false, // 表格更新时的loading

			show_modal: false, // 弹框的控制

			banner_detail: {}, // Banner列表详情

			banners: {}, // Banner列表

			button_loading: false, // 按钮的loading

			products: [], // 商品信息

			jump_type: [], // 跳转类型

			stores: [], // 店铺

			device_accounts: [], // 所属设备
		};
	},

	mounted() {
		this.fetchBannerCreateInfo();
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 切换tab
         * @param  {string} tab_name {tab的name}
         * @return {undefined}
         */
		changeTab(tab_name) {
			if (tab_name === '查看') {
				this.fetchBannerList(this.query_info);

				this.$refs.create.handleReset('formValidate');
			} else {
				this.banners.data = [];
			}
		},

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchBannerList(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchBannerList(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
		confirmSearch({
			keyword, sort_column, sort_by,
		}) {
			const param = {
				page: this.query_info.page,

				per_page: this.query_info.per_page,

				name: keyword,
			};

			switch (sort_by) {
			case '':

				break;
			default:
				param.order_bys = [
					{
						sort: sort_by,
						order_by: sort_column,
					},
				];
			}

			this.search_info = JSON.parse(JSON.stringify(param));

			this.fetchBannerList(this.search_info);
		},

		/**
         * 新增Banner的表单数据
		 * @param {Object} param {新增表单参数对象}
         * @return {undefined}
         */
		postData(param) {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.post(API_LIST.CUST_BANNER, param)

				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.create_success'));

					this.$refs.create.handleReset('formValidate');
				})

				.catch((err) => {
					this.$Message.error(err.message);
				})

				.then(this.closeSpin);
		},

		/**
         * 查看Banner列表详情弹窗
         * @param  {string} detail {Banner详情对象}
         * @return {undefined}
         */
		bannerDetail(detail) {
			this.banner_detail = detail;

			this.show_modal = true;
		},

		/**
		 * Banner列表详情关闭弹窗
		 * @return {undefined}
		 */
		hide_BannerModal() {
			this.banner_detail = null;
		},

		/**
         * 更新Banner列表信息
         * @param  {Object} param {需要更新的参数对象}
		 * @param {Number} id {banner信息的id}
         * @return {undefined}
         */
		updateBanner(id, param) {
			this.showSpin();

			this.$http.post(`${API_LIST.CUST_BANNER}/${id}`, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.fetchBannerList(this.search_info);
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
         * 删除Banner
         * @param  {Number} id {需要删除的banner的id}
         * @return {undefined}
         */
		deleteBanner(id) {
			this.$Modal.confirm({

				title: this.$t('product.tip'), // '温馨提示',
				content: this.$t('product.is_delete'), // '删除之后将无法恢复，确定吗？',
				onOk: () => {
					const param = {

						_method: 'DELETE',

					};
					this.table_loading = true;

					this.$http.post(`${API_LIST.CUST_BANNER}/${id}`, param)

						.then(({ data }) => {
							if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

							this.fetchBannerList(this.search_info);

							this.$Message.success(this.$t('common.delete_success'));
						})

						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						})

						.then(() => { this.table_loading = false; });
				},
				onCancel: () => {},

			});
		},

		/**
         * 获取创建banner时所需信息
         * @return {undefined}
         */
		fetchBannerCreateInfo() {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.get(`${API_LIST.CUST_BANNER}/create`)

				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.products = data.products;

					this.jump_type = data.banner_types;

					this.stores = data.stores;

					this.device_accounts = data.device_accounts;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(this.closeSpin);
		},

		/**
         * 获取Banner列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchBannerList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.CUST_BANNER}?${query_str}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);
					this.banners = data.banners;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},

	},
};
</script>
